<template>
    <!-- 主框架 -->
    <div class="main">
        <!-- 头部 -->
        <div class="header">
            <img :src="userData.lightMode ? lightimg : darkimg" class="h-logo" alt="" />
            <div class="h-right">
                <div>
                <el-button @click="updateFlag = true" link>
                    更新日志
                </el-button>
                <el-button @click="resourceFlag = true" link>
                    资源库
                </el-button></div>
                <p class="h-mess">{{ loginMode }}</p>
            </div>
        </div>
        <!-- 主要内容 -->
        <div class="content">
            <router-view></router-view>
        </div>
        <!-- ai助手 -->
        <Ai class="AI" />
        <!-- 资源库 -->
        <ResourceLibraryCont v-model="resourceFlag"></ResourceLibraryCont>
        <Update_Log v-model="updateFlag"></Update_Log>
    </div>
</template>

<script setup lang='js' name=''>
import Ai from "@/components/Utils/Chat_Gpt/Chat_Gpt.vue"
import { ref } from 'vue'
import darkimg from "@/components/assets/Logo/Logo_dark.png"
import lightimg from "@/components/assets/Logo/Logo_light.png"
import { userDataStore } from '@/store/useUserDataStore';
import { useRouter } from 'vue-router';
import ResourceLibraryCont from '@/components/Utils/ResourceLibraryCont/ResourceLibraryCont.vue';
import Update_Log from "./Utils/UpdateLog/Update_Log.vue";
const userData = userDataStore()
const resourceFlag = ref(false)
const updateFlag = ref(false)
const router = useRouter();
// 获取当前路由的名称
const currentRouteName = router.currentRoute.value.name;
// 登录模式
const loginMode = ref("")
if (currentRouteName) {
    loginMode.value = currentRouteName
} else {
    loginMode.value = "未知登录"
}

</script>

<style scoped>
.AI {
    z-index: 10 !important;
}

.main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    height: 60px;
    background: #3e3e3e;
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
}

.h-logo {
    height: 60px;
}

.h-right {
    align-items: center;
    justify-content: center;
    gap: 20px;
    display: flex;
    flex-direction: row;
}

.h-right>div>* {
    transition: all 0.5s;
    font-size: 20px;
    background: #00000021;
    padding: 20px;
    color: white;
}

.h-right>div>*:hover {
    background: #00000041;
}

.h-mess {
    color: white;
    font-size: 25px;
    font-weight: bold;
    line-height: 60px;
}

.content {
    flex: 1;
    padding: 10px;
    background: var(--Main_backGround);
    transition: all 0.5s;
    height: 100%;
    overflow: hidden;
}

/* 表格 */
:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
    
    transition: all 0.5s;
    background: var(--Main_tableBG) !important;
    border-bottom: 1px solid var(--Main_tableBorder);
    border-top: 1px solid var(--Main_tableBorder);
}

/* 表格底线 */
:deep(.el-table__inner-wrapper:before) {
    background: var(--Main_tableLine);
    transition: all 0.5s;
}

/* 分页按钮 */
:deep(.el-select__wrapper),
:deep(.el-input__wrapper),
:deep(.el-pager li),
:deep(.el-pagination button) {
    background: var(--Main_paperBG) !important;
    transition: all 0.5s;
}
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}
</style>